import { useNavigate } from 'react-router-dom'
import { LeftOutline, RightOutline } from 'antd-mobile-icons'

const asset = (p: string) => `${import.meta.env.BASE_URL}${p.replace(/^\/+/, '')}`

const groups = [
  {
    id: 'group-1',
    date: '2024-12-05',
    items: [
      { id: 1, title: '紧致背部', time: '08:30', cover: asset('紧致背部.png') },
      { id: 2, title: '平板支撑', time: '08:30', cover: asset('平板支撑.png') },
      { id: 3, title: '四头肌腿部训练', time: '08:30', cover: asset('全面腰腹.png') },
      { id: 4, title: '箭步蹲跳', time: '17:30', cover: asset('深蹲跳跃.png') },
    ],
  },
]

const Notifications = () => {
  const navigate = useNavigate()
  
  return (
    <div className="notifications-page">
      {/* 头部 */}
      <div className="header">
        <div className="status-bar">
          <span className="time">9:41</span>
          <div className="status-icons">
            <span className="signal">●●●●</span>
            <span className="wifi">📶</span>
            <span className="battery">🔋</span>
          </div>
        </div>
        <div className="nav-header">
          <button className="back-btn" onClick={() => navigate(-1)}>
            <LeftOutline />
          </button>
          <div className="title">通知</div>
          <div style={{ width: 24 }} />
        </div>
      </div>

      <div className="content">
        {groups.map(group => (
          <div key={group.id} className="date-group">
            <div className="date-label">{group.date}</div>
            {group.items.map(item => (
              <div key={item.id} className="notification-item">
                <img src={item.cover} alt={item.title} className="item-image" />
                <div className="item-info">
                  <div className="item-title">{item.title}</div>
                  <div className="item-time">{item.time}</div>
                </div>
                <RightOutline className="arrow-icon" />
              </div>
            ))}
          </div>
        ))}
      </div>

      <style>{`
        .notifications-page {
          min-height: 100vh;
          background: #f8f9fa;
        }
        
        .header {
          background: white;
          padding-top: 8px;
        }
        
        .status-bar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px 8px;
          font-size: 14px;
          font-weight: 600;
        }
        
        .time {
          color: #000;
        }
        
        .status-icons {
          display: flex;
          gap: 4px;
          align-items: center;
          font-size: 12px;
        }
        
        .nav-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 20px 16px;
        }
        
        .back-btn {
          background: none;
          border: none;
          font-size: 20px;
          color: #333;
          cursor: pointer;
          padding: 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .title {
          font-size: 18px;
          font-weight: 600;
          color: #333;
        }
        
        .content {
          padding: 20px;
        }
        
        .date-group {
          margin-bottom: 24px;
        }
        
        .date-label {
          font-size: 14px;
          color: #666;
          margin-bottom: 16px;
          padding-left: 4px;
        }
        
        .notification-item {
          background: white;
          border-radius: 12px;
          padding: 16px;
          margin-bottom: 12px;
          display: flex;
          align-items: center;
          gap: 12px;
          box-shadow: 0 1px 4px rgba(0,0,0,0.1);
          cursor: pointer;
          transition: transform 0.2s;
        }
        
        .notification-item:active {
          transform: scale(0.98);
        }
        
        .item-image {
          width: 50px;
          height: 50px;
          border-radius: 8px;
          object-fit: cover;
        }
        
        .item-info {
          flex: 1;
        }
        
        .item-title {
          font-size: 16px;
          font-weight: 600;
          color: #333;
          margin-bottom: 4px;
        }
        
        .item-time {
          display: inline-block;
          background: #ff6b35;
          color: white;
          padding: 2px 8px;
          border-radius: 12px;
          font-size: 12px;
          font-weight: 500;
        }
        
        .arrow-icon {
          color: #999;
          font-size: 16px;
        }
      `}</style>
    </div>
  )
}

export default Notifications